<template>
	<view>
		<view class="content">
			<view class="title">
				<view class="" style="z-index: 1000;">
					手机快捷登录
				</view>
				<view class="line"></view>
			</view>
			<view class="item">
				<view class="left">
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/login/phone.png"></image>
				</view>
				<view class="right">
					<input type="number" pattern="[0-9]*" v-model="phone" maxlength="11"
						placeholder-style="color:#CCCCCC;font-size:22rpx" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="item">
				<view class="left">
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/login/lock.png"></image>
				</view>
				<view class="right">
					<input type="text" v-model="picCode" maxlength="10"
						placeholder-style="color:#CCCCCC;font-size:22rpx" placeholder="请输入图形验证码" />
					<view class="code-img-wrapper" @click="updateImageCode">
						<canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/login/verify.png"></image>
				</view>
				<view class="right">
					<input type="number" v-model="verify_code" maxlength="10"
						placeholder-style="color:#CCCCCC;font-size:22rpx " placeholder="请输入验证码" />
					<!-- <view class="getCode" @tap="checkClick" :class="{disNone: flowCheck !== '获取验证码'}">获取手机验证码</view> -->
					<button :disabled="disabled" class="getCode" @click.stop="getCode()">{{getCodeText}}
					</button>
				</view>
			</view>
		</view>
		<button @click="submit" :class="{colorChange: !select}">登 录</button>

	</view>
</template>

<script lang="ts">
	import {
		Mcaptcha
	} from '@/util/mcaptcha';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		defineComponent,
		getCurrentInstance,
		onMounted,
		reactive,
		ref,
		toRefs
	} from 'vue';
	import type {
		Ref
	} from 'vue'
	export default defineComponent({
		setup() {
			const {
				proxy
			} = getCurrentInstance() as any
			let dataList = reactive({
				captcha_photo: '', // 图形验证码
				captcha_id: '', // 图形验证码id
				picCode: '', // 图形验证码文本
				phone: '', // 手机号码
				verify_code: '', // 短信验证码
				// 获取验证码
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
				disabled: false,

			})
			function getCode() {
				dataList.disabled = true
				dataList.getCodeText = "发送中..." //发送验证码
				dataList.getCodeisWaiting = true;

				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					//this.$common.msg('验证码已发送')
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); //弹出提示框
					setTimer(); //调用定时器方法
				}, 1000)
			};
			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			function setTimer() {
				let holdTime = 60; //定义变量并赋值
				dataList.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				dataList.Timer = setInterval(() => {
					if (holdTime <= 0) {
						dataList.disabled = false
						dataList.getCodeisWaiting = false;
						dataList.getCodeText = "获取验证码"
						clearInterval(dataList.Timer); //清除该函数
						return; //返回前面
					}
					dataList.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			};
			// 获取验证码end

			function updateImageCode() {
				dataList.mcaptcha.refresh()
			};

			function submit() {

				if (!dataList.phone) {
					return uni.showToast({
						title: "请输入手机号码"
					});
				}
				if (!dataList.picCode) {
					return uni.showToast({
						title: '请输入图形验证码'
					})
				}
				let validate = dataList.mcaptcha.validate(dataList.picCode)
				if (!validate) {
					return uni.showToast({
						title: '图形验证码错误'
					})
				}
				// if (!this.picCode) {
				// 	Util.showToast("请输入图形验证码");
				// 	return;
				// }

				if (!dataList.verify_code) {
					return uni.showToast({
						title: "请输入短信验证码"
					});
				}
			};


			onMounted(() => {
				dataList.mcaptcha = new Mcaptcha({
					el: 'canvas',
					width: 80,
					height: 35,
					createCodeImg: ""
				});
				// getAPPID()

			})

			return {
				submit,
				getCode,
				setTimer,
				updateImageCode,
				...toRefs(dataList),
			}
		}

	})
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		width: 170rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 200rpx 20rpx 20rpx 20rpx;
		font-size: 28rpx;
		font-weight: bold;

		.line {
			// margin-left:-20rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 10rpx;
			width: 170rpx;
			background-color: #0ABA94;

		}
	}

	.content {
		border-top: 2rpx solid #F7F7F7;
		background-color: #FFFFFF;
	}

	.item {
		width: 94%;
		height: 112rpx;
		margin: 0 auto;
		box-sizing: border-box;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
	}

	.left {
		// width: 36%;
		margin-left: 20rpx;


		font-size: 24rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	text {
		color: #FF0000;
	}

	.right {
		width: 85%;
		// position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
	}

	.agreement {
		font-size: 22rpx;
		color: #999999;
	}

	.footer {
		margin-top: 20rpx;
		display: flex;
		width: 94%;
		margin: 20rpx auto;
	}

	button::after {
		border: none;
	}

	/* 注意：button前面不需要加点 */
	button[disabled] {
		color: #fff !important;
		background-color: rgb(188, 188, 188) !important;
	}

	button {
		width: 94%;
		margin: 56rpx auto;
		background-color: #CCCCCC;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 15rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.getCode {
		width: 200rpx;
		// position: absolute;
		// right: 20rpx;
		background-color: #0ABA94;
		height: 50rpx;
		font-family: PingFangSC-Regular;
		font-size: 20rpx;
		color: #fff !important;
		letter-spacing: 0;
		text-align: center;
		line-height: 50rpx;
		// padding:6rpx 20rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		margin-right: -5rpx;
		// border: 2rpx solid #2079FA;
		// border-radius: 8rpx;
	}

	.picCode {
		width: 160rpx;
		height: 60rpx;
	}

	picker {
		width: 100%;
	}

	.color {
		color: #CCCCCC;
	}

	.down {
		width: 34rpx;
		height: 18rpx;
		margin-left: 24rpx;
		margin-top: 12rpx;
	}

	image {
		width: 26rpx;
		height: 26rpx;
		padding: 4rpx 10rpx 0 0;
	}

	.colorChange {
		background-color: #0ABA94;
		// opacity: 0.5;
		/* 禁止点击 */
		// pointer-events: none;
	}

	.code-img-wrapper {
		margin-right: -40rpx;
	}
</style>
